<template>
	<section>
		<el-row class="border padding"> 
		<el-col :span="10"> 
			<draggable id="delDrg"  class="dragArea" :list="delFields" :options="{group:{ name:'g1'}, animation:150}"  :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
				<el-row type="flex"> 
 					<el-badge :value="selectedFields.length">
						<span style="align:center;margin-top:50px;">
							<slot name="setBtn">
							</slot>
							&nbsp;&nbsp;将右边表单元素拖拽到方框内   拖拽表单元素可以排序,最多支持15个字段 
						</span>
					</el-badge>  
				</el-row> 
			</draggable>
			<el-form class="drag" label-width="100px" style="width:100%;height:600px;overflow:auto" ref="showDataRef">
				<div style="border:1px dashed #000;padding: 20px;"> 
					<slot name="formName">
						<el-input  label="标题" v-model="myFormDef.formName" required  width="100%" placeholder="标题"> 
						</el-input>
					</slot>
 				  	
 				  <el-form-item > 
				   <div v-if="selectedFields.length==0">
					 <span>
				   	 	从右边拖拽属性来此，可添加表单属性 <i class="el-icon-download"></i> 
				 	 </span>
				    </div>
				  </el-form-item>
				<draggable id="sf"  class="dragArea min-height" :list="selectedFields" :options="{group:{ name:'g1'}, animation:150}" @add="add"  :no-transition-on-drag="true" @start="drag=true" @end="drag=false">

					<el-form-item class="form-item"  v-for="(item,index) in selectedFields" :key="index" :label="item.fieldTitle" :prop="item.fieldIdCamel" :rules="[{ required: item.isRequired=='1', message: '该项必填', trigger: 'change' }]"> 
						<div  v-if="item.qx=='nr'"></div>
					<!--用户-->
						<mdp-select-user v-else-if=" item.extFieldType=='user'" :show-style="item.showStyle" :disabled="item.qx=='r'" :multiple="item.isMultiple=='1'" v-model="showData[item.fieldIdCamel]"  :label="item.fieldTitle"  :placeholder="item.placeholder"  split=",">			 
						</mdp-select-user>  
					<!--部门-->
						<mdp-selecct-dept v-else-if=" item.extFieldType=='deppt'" :show-style="item.showStyle" :branch-id="userInfo.branchId" :show-checkbox="item.isMultiple=='1'" :multiple="item.isMultiple=='1'" split=","></mdp-selecct-dept>

					<!--标签-->
						<mdp-select-tag  v-else-if=" item.extFieldType=='tag'" :show-style="item.showStyle" :disabled="item.qx=='r'" :multiple="item.isMultiple=='1'" v-model="showData[item.fieldIdCamel]"  :label="item.fieldTitle"  :placeholder="item.placeholder"  split=",">			 
						</mdp-select-tag>  
					<!--下拉框-->
						<mdp-select v-else-if=" ['select','radio','checkbox'].some(k=>k==item.fieldType)"  :show-style="item.showStyle" :disabled="item.qx=='r'" :show-type="item.fieldType"  :item-code="item.dictCode" :multiple="item.isMultiple=='1'" v-model="showData[item.fieldIdCamel]"  :label="item.fieldTitle"  :placeholder="item.placeholder" split=",">			 
						</mdp-select>
					<!--html-->
						<el-popover v-else-if=" item.extFieldType=='html'"
							placement="top-start"
							width="400"
							trigger="hover">
							<el-input  type="textarea" rows="4" v-model="showData[item.fieldIdCamel]"></el-input>
							<div slot="reference"  v-html="showData[item.fieldIdCamel]||item.defaultValue||'无'"></div>
						</el-popover>
					<!--link 链接-->
						<el-popover v-else-if=" item.extFieldType=='link'"
							placement="top-start"
							width="400"
							trigger="hover">
							<el-input v-model="showData[item.fieldIdCamel]" ></el-input>
 							<el-link slot="reference" :href="showData[item.fieldIdCamel]" target="_blank">{{ showData[item.fieldIdCamel]||item.fieldTitle }}</el-link> 
						</el-popover>
					<!--image-->
						<el-popover v-else-if=" item.extFieldType=='image'"
							placement="top-start" 
							trigger="hover">
							<el-button  @click="$refs['imageDialog'].open({formData:showData,item:item})">上传图片</el-button> 
							<el-image slot="reference" :style="item.styleObj||{maxHeight:'100px',maxWidth:'100px'}"
								:src="showData[item.fieldIdCamel]"
								fit="contain" >
							</el-image>
 						</el-popover>
					<!--att 附件-->
						<el-popover v-else-if=" item.extFieldType=='att'"
							placement="top-start" 
							trigger="hover">
							<el-button  @click="$refs['attDialog'].open({formData:showData,item:item})">上传附件</el-button> 
 							<el-link slot="reference" :href="showData[item.fieldIdCamel]" target="_blank">{{ showData[item.fieldIdCamel]||item.fieldTitle }}</el-link> 
						</el-popover>
					<!--其它类型-->
						<mdp-input :show-style="item.showStyle"  :disabled="item.qx=='r'" v-else-if="item.fieldType=='text'"  style="width:99%;" v-model="showData[item.fieldIdCamel]"  :label="item.fieldTitle" auto-complete="off" :placeholder="item.placeholder"  clearable > </mdp-input>
 						<mdp-number :show-style="item.showStyle" :disabled="item.qx=='r'"   v-else-if="item.fieldType=='number'" v-model="showData[item.fieldIdCamel]"  :label="item.fieldTitle" auto-complete="off"  placeholder="请输入内容"  clearable ></mdp-number>
						<mdp-number :show-style="item.showStyle" :disabled="item.qx=='r'"   v-else-if="item.fieldType=='amount'" v-model="showData[item.fieldIdCamel]"  :label="item.fieldTitle" auto-complete="off"  placeholder="请输入内容"  clearable></mdp-number>
						<mdp-input :show-style="item.showStyle" :disabled="item.qx=='r'"   v-else-if="item.fieldType=='textarea'"  type="textarea" :rows="2" v-model="showData[item.fieldIdCamel]"  :label="item.fieldTitle"  placeholder="请输入内容"></mdp-input>
						<el-time-picker :show-style="item.showStyle" :disabled="item.qx=='r'"   v-else-if="item.fieldType=='time'"  v-model="showData[item.fieldIdCamel]"  placeholder="任意时间点"> </el-time-picker> 
						<mdp-date :show-style="item.showStyle" :disabled="item.qx=='r'"   v-else-if="item.fieldType=='date'" v-model="showData[item.fieldIdCamel]" align="right" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions"> </mdp-date>
						<mdp-date :show-style="item.showStyle" :disabled="item.qx=='r'" v-else-if="item.fieldType=='datetime'" v-model="showData[item.fieldIdCamel]" type="datetime"  value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"> </mdp-date>
						<mdp-date :show-style="item.showStyle" :disabled="item.qx=='r'" v-else-if="item.fieldType=='month'" v-model="showData[item.fieldIdCamel]" type="month" value-format="yyyy-MM" format="yyyy-MM" placeholder="选择月份"></mdp-date>
						<mdp-date :show-style="item.showStyle" :disabled="item.qx=='r'" v-else-if="item.fieldType=='year'" v-model="showData[item.fieldIdCamel]" type="month" value-format="yyyy" format="yyyy" placeholder="选择年"></mdp-date>
						<mdp-date-range :show-style="item.showStyle" :disabled="item.qx=='r'"   v-else-if="item.fieldType=='daterange'" :value="showData[item.fieldIdCamel]?showData[item.fieldIdCamel].split(','):[]" align="right" type="daterange" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions"
							@change="(vs)=>showData[item.fieldIdCamel]=vs.join(',')"
						> </mdp-date-range>  	
						<el-button class="set-btn"  type="warning" icon="el-icon-edit" circle @click="itemClick(item,index)"></el-button> 
						<el-button class="set-btn"  type="danger" icon="el-icon-delete" circle @click="itemDelete(item,index)"></el-button> 
					</el-form-item>   
				</draggable>
				</div>
			</el-form> 
		</el-col>
		<el-col :span="6" >
				<el-popover
				  ref="popover5"
				  placement="left"
				  style="width:250px;"
				  v-model="showPopover">
				  <el-form v-model="addForm" :rules="addFormRules" ref="addForm" label-width="80px" style="width:350px;">
				  	 <el-form-item v-if="(addForm.fieldType=='select' || (addForm.fieldType=='checkbox') || (addForm.fieldType=='radio')) && !addForm.extFieldType" label="数据" prop="isDict">
				  		<el-col :span="20">
				  			<el-input  v-model="addForm.dictCode"  @focus="$refs['itemDialog'].open(addForm)" placeholder="点击关联基础数据"> </el-input>
				  		</el-col>  
				  		<el-col :span="4">
				  			<el-button  type="primary" icon="el-icon-delete" @click="deleteBaseData"></el-button>
				  		</el-col>  
				  	</el-form-item>
				  	<el-form-item label="名称" prop="fieldTitle">
				  		<el-col :span="20">
				  			<el-input  v-model="addForm.fieldTitle" label="属性名称" auto-complete="off"  placeholder="请输入内容"   > </el-input>
				  		</el-col>
				  	</el-form-item>
				  	<el-form-item label="主键" prop="isBizKey" v-if="  (addForm.fieldType!='checkbox') && (addForm.fieldType!='radio') && addForm.isMultiple!='1' && addForm.fieldType!='textarea'" > 
				  			  
								  <el-select   v-model="primaryKeys" multiple label="" clearable  placeholder="请选择">
									 <el-option    label="创建人" key="cuserid" value="cuserid">创建人 </el-option>
									 <el-option    label="创建部门" key="deptid" value="deptid">创建部门 </el-option>
								    <el-option   v-for="option in selectedFields" :label="option.fieldTitle" :key="option.fieldIdCamel" :value="option.fieldIdCamel">{{option.fieldTitle}} </el-option>
								  </el-select>
				  	</el-form-item>
				  	<el-form-item label="必需" prop="isRequired" > 
				  		<el-checkbox v-model="addForm.isRequired" :disabled="addForm.isBizKey=='1'" true-label="1" false-label="0">是否必输</el-checkbox>  
				  	</el-form-item>
				  	<el-form-item label="编码" prop="fieldId">
				  		<el-col :span="20">
				  			<el-input  :disabled="myFormDef.isCreateTable!='1'" v-model="addForm.fieldId" :label="addForm.fieldId" auto-complete="off"  placeholder="请输入内容"   > </el-input>
				  		</el-col>
				  	</el-form-item>
				  	<el-form-item label="编码驼峰命名" prop="fieldIdCamel" v-if="formDef.isCreateTable=='1'">
				  		<el-col :span="20">
				  			<el-input  :disabled="formDef.isCreateTable!='1'" v-model="addForm.fieldIdCamel" :label="addForm.fieldIdCamel" auto-complete="off"  placeholder="请输入内容"   > </el-input>
				  		</el-col>
				  	</el-form-item>
				  	<el-form-item label="变量映射" prop="flowFieldId">
				  		<el-col :span="20">
				  		<el-input  v-model="addForm.flowFieldId" label="变量" auto-complete="off"  placeholder="变量编码"   > </el-input> 
				  	</el-col> 
				  	</el-form-item>
				  	<el-form-item label="长度" prop="fieldLength">
				  		<el-col :span="20">
				  			<el-input   v-model="addForm.fieldLength" :label="addForm.fieldId" auto-complete="off"  placeholder="请输入内容"   > </el-input>
				  	</el-col>
				  	</el-form-item>
				  	<el-form-item label="占位符" prop="placeholder">
				  		<el-col :span="20">
				  			<el-input   v-model="addForm.placeholder" :label="addForm.placeholder" auto-complete="off"  placeholder="请输入内容"   > </el-input>
				  	</el-col> 
				  	</el-form-item>
					<el-form-item v-if="addForm.fieldType=='select' || (addForm.fieldType=='checkbox') || (addForm.fieldType=='radio')" label="默认值" prop="defaultValue">
						<el-col :span="20">
							<mdp-select :item-code="addForm.dictCode" v-model="addForm.defaultValue" :label="addForm.fieldTitle" clearable placeholder="请选择"/> 
						</el-col> 
				  	</el-form-item>
					<el-form-item v-else label="默认值" prop="defaultValue">
				  		<el-col :span="20">
				  			<el-input   v-model="addForm.defaultValue" :label="addForm.placeholder" auto-complete="off"  placeholder="请输入内容"   > </el-input>
				  	</el-col> 
				  	</el-form-item>
				  	<el-form-item label="多选" prop="isMultiple">
				  		<el-col :span="20">
				  		    <el-checkbox  v-model="addForm.isMultiple" :disabled=" addForm.fieldType!='checkbox' && addForm.fieldType!='select' && addForm.extFieldType!='dept'" true-label="1" false-label="0">多选</el-checkbox>  
				  	</el-col> 
				  	</el-form-item>
				  	<el-form-item label="权限" prop="fieldQx">
						<el-button @click="$refs['qxDialog'].open(addForm)">字段权限设置</el-button>
				  	</el-form-item>
				  	<el-form-item label="展示风格" prop="showStyle">
				  		<el-col :span="20">
				  		<el-radio v-model="addForm.showStyle" label="origin">原生-origin</el-radio> 
						
				  		<el-radio v-model="addForm.showStyle" label="tag">标签-tag</el-radio> 
						
				  		<el-radio v-model="addForm.showStyle" label="x">综合-x</el-radio> 
				  	</el-col> 
				  	</el-form-item>
				  	<el-form-item label="css style" prop="styleObj">
						<el-input type="textarea" rows="2" v-model="addForm.styleObj" :label="addForm.fieldIdCamel" auto-complete="off"  placeholder="请输入json 对象 如 {maxHeight:'100px',maxWidth:'100px'}"   > </el-input>

				  	</el-form-item>
				  	<el-form-item label="扩展信息" prop="extInfos">
				  		<el-col :span="20"> 
							  <el-popover  
									placement="top-start"
									width="400"
									trigger="hover">
									<mdp-form-expand  v-model="addForm.extInfos" expand-id="form_field"></mdp-form-expand> 
									<el-button slot="reference">显示扩展信息</el-button> 
								</el-popover>
				  		</el-col>  
				  	</el-form-item>

				  </el-form>
				  <div style="text-align: right; margin: 0">
				    <el-button  type="text" @click="showPopover = false">关闭</el-button>
				    <el-button type="primary"  @click="showPopover = false">确定</el-button>
				  </div>
				</el-popover>
		</el-col>
		<el-col :span="10" :offset="4">
			    	<el-form :model="addForm"  label-width="100px"  style="width:100%;height:600px;overflow:auto" :rules="addFormRules" ref="inputAddForm">
						<draggable id="af" class="dragArea min-height"  :options="{group:{ name:'g1', pull:'clone'}, animation:150}"  v-model="sampleFields" >
							<el-form-item v-for="(item,index) in sampleFields" :key="index" :label="item.fieldTitle" :prop="item.fieldIdCamel">
								<el-input style="width:60%;"  v-if="item.extFieldType=='html'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off" :placeholder="item.placeholder"  clearable  > </el-input>
								<el-image v-else-if="item.extFieldType=='image'"
									style="width:100px;heigth:100px;"
									:src="item.defaultValue"
									fit="contain">
								</el-image>
								<el-link style="width:60%;"  v-else-if="item.extFieldType=='att'" :href="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off" :placeholder="item.placeholder"  clearable  >{{item.fieldTitle}} </el-link>
								<el-link style="width:60%;"  v-else-if="item.extFieldType=='link'" :href="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off" :placeholder="item.placeholder"  clearable  >{{item.fieldTitle}} </el-link>

								<el-input style="width:60%;"  v-else-if="item.fieldType=='text' && item.extFieldType!='dept'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off" :placeholder="item.placeholder"  clearable  > </el-input>
								<el-input-number   v-else-if="item.fieldType=='number'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off"  placeholder="请输入内容"  clearable :min="1" :max="10" ></el-input-number>
								<el-input style="width:60%;"   v-else-if="item.fieldType=='amount'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle" auto-complete="off"  placeholder="请输入内容"  clearable></el-input>
								<el-input style="width:60%;"  v-else-if="item.fieldType=='textarea'"  type="textarea" :rows="2" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle"  placeholder="请输入内容"></el-input>
								<mdp-select-user :show-style="item.showStyle"  v-else-if="item.fieldType=='select' && item.extFieldType=='user'" :multiple="item.isMultiple=='1'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle"  placeholder="请选择" split="," />
								<mdp-select-tag :show-style="item.showStyle"  v-else-if="item.fieldType=='select' && item.extFieldType=='tag'" :multiple="item.isMultiple=='1'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle"  placeholder="请选择" split="," />

								<mdp-select :show-style="item.showStyle" :options="options2[item.fieldIdCamel]"  v-else-if="item.fieldType=='select' && item.extFieldType!='user'"  :multiple="item.isMultiple=='1'" v-model="sampleData[item.fieldIdCamel]" :label="item.fieldTitle"  placeholder="请选择" split=","/>
								<mdp-select :show-style="item.showStyle" :options="options2[item.fieldIdCamel]" :show-type="item.fieldType" v-else-if="item.fieldType=='radio' " v-model="sampleData[item.fieldIdCamel]"/> 
 								<el-time-picker :show-style="item.showStyle"   v-else-if="item.fieldType=='time'"  v-model="sampleData[item.fieldIdCamel]"  placeholder="任意时间点"> </el-time-picker> 
								<el-date-picker :show-style="item.showStyle"   v-else-if="item.fieldType=='daterange'" v-model="sampleData[item.fieldIdCamel]" align="right" type="daterange" placeholder="选择日期" > </el-date-picker> 

								<el-date-picker :show-style="item.showStyle"   v-else-if="item.fieldType=='date'" v-model="sampleData[item.fieldIdCamel]" align="right" type="date" placeholder="选择日期" > </el-date-picker> 
								<el-date-picker :show-style="item.showStyle" v-else-if="item.fieldType=='datetime'" v-model="sampleData[item.fieldIdCamel]" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"> </el-date-picker>
								<el-date-picker :show-style="item.showStyle"   v-else-if="item.fieldType=='month'" v-model="sampleData[item.fieldIdCamel]" align="right" type="month" placeholder="选择月份" > </el-date-picker> 
								<el-date-picker :show-style="item.showStyle"   v-else-if="item.fieldType=='year'" v-model="sampleData[item.fieldIdCamel]" align="right" type="year" placeholder="选择年份" > </el-date-picker> 
								<mdp-select-dept :show-style="item.showStyle"  v-else-if="item.extFieldType=='dept'" v-model="sampleData[item.fieldIdCamel]" :multiple="item.isMultiple=='1'"  split=","></mdp-select-dept> 
								<el-button class="set-btn"  type="primary" icon="el-icon-edit" circle @click="itemClick(item,index)"></el-button> 
								<el-button class="set-btn"  type="danger" icon="el-icon-delete" circle @click="itemDelete(item,index)"></el-button> 
 							</el-form-item>  
						</draggable>
					</el-form> 
		</el-col> 
		<!--基础数据查询 CodeDetail sys_code_detail界面-->
		<mdp-dialog ref="itemDialog" title="选择数据组" width="80%" :modal="false">
			<template v-slot="{visible,data,dialog}">
				<mdp-meta-item  :visible="visible" sub-op-type="select" @select="(item)=>{
					data.isDict='1';
					data.dictCode=item.itemCode
					dialog.close()
				}"></mdp-meta-item>
			</template> 
		</mdp-dialog>  
		<mdp-dialog ref="qxDialog" title="权限配置" width="80%" :modal="false">
			<template v-slot="{visible,data,dialog}">
				<field-qx-set :visible="visible" v-model="data.fieldQx" :fieldTitle="data.fieldTitle" @close="dialog.close()" @submit="dialog.close()"/> 
			</template> 
		</mdp-dialog>  
		<mdp-dialog ref="imageDialog" title="选择图片" width="80%" :modal="false">
			<template v-slot="{visible,data,dialog}">
				<mdp-select-image v-if="visible" :visible="visible" @select="(imgs)=>{
					if(data.item.isMultiple=='1'){
						data.formData[data.item.fieldIdCamel]=imgs&&imgs.length>0?imgs.map(i=>i.url).join(','):null
					}else{
						data.formData[data.item.fieldIdCamel]=imgs&&imgs.length>0?imgs[0].url:null
					}
					dialog.close();
				}"></mdp-select-image>
			</template> 
		</mdp-dialog>  
		<mdp-dialog ref="attDialog" title="选择文件" width="80%" :modal="false">
			<template v-slot="{visible,data,dialog}">
				<mdp-select-att v-if="visible" :visible="visible" :multiple="data.item.isMultiple=='1'" @select="(imgs)=>{
					 
					if(data.item.isMultiple=='1'){
						data.formData[data.item.fieldIdCamel]=imgs&&imgs.length>0?imgs.map(i=>i.url).join(','):null
					}else{
						data.formData[data.item.fieldIdCamel]= (imgs?imgs.url:null)
					}
					 
					 dialog.close();
				}" split=","></mdp-select-att>
			</template> 
		</mdp-dialog>  
		</el-row>
	</section>
</template>

<script>
 	import draggable from 'vuedraggable'  
	import { mapGetters } from 'vuex'
	 import FieldQxSet from './FieldQxSet.vue';

	export default { 
	    computed: {
		    ...mapGetters([
		      'userInfo'
		    ])
		}, 
		props:{
			visible:{
				type:Boolean,
				default:false,
			},
			formDef:{
				type:Object,
				default:null,
			},
			formFields:{
				type:Array,
				default:[]
			}
		},
		watch: { 
	      'formDef':function( formDef ) { 
			if(formDef==this.myFormDef){
				return;
			}
	    	this.myFormDef=formDef; 
	      },
	      'addForm.isBizKey':function( isBizKey ) {   
 			if(isBizKey=='1'){
 				this.addForm.isRequired="1" 
 			}
		  },
	      'visible':function(visible) { 
	      	if(visible==true){ 
				
				this.selectedFields=JSON.parse(JSON.stringify(this.formFields))
				this.setPrimaryKeys();
				this.$nextTick(()=>{
					this.$refs.showDataRef.clearValidate();
				})
	      	}
	      } 
	    },	
		data() {
			return {
				filters:{
					users:[]
				},
				pickerOptions: { 
					shortcuts: [{
						text: '今天',
						onClick(picker) {
						picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
						const date = new Date();
						date.setTime(date.getTime() - 3600 * 1000 * 24);
						picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
						const date = new Date();
						date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', date);
						}
					}]
					},
				options:{},//下拉选择框的所有静态数据
				options2:{
					zero:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					one:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					two:   [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					three: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					four: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					five:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					six:   [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					seven: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					eight:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					nine:   [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					ten: [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					eleven: [{id:'0',name:'否'},{id:'1',name:'是'}],
					twelve:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					
					thirteen:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					
					fourteen:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					
					fifteen:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					
					sixteen:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					
					seventeen:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					
					eighteen:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					
					eighteen:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					nineteen:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],
					twenty:  [{id:'0',name:'选项0'},{id:'1',name:'选项1'},{id:'2',name:'选项2'}],

					
				}, 
				load:{list: false,},
				addFormRules: {
					id: [
						{ required: false, message: '主键', trigger: 'blur' }
					]
				},
				//新增界面数据 表单字段定义
				addForm: {formId:'formId',id:'1',showStyle:'origin',fieldId:'one',fieldIdCamel:'one',fieldTitle:'文本',fieldType:'text',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',isDict:'0',dictCode:'',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
				myFormDef:{id:'',tableName:'',tableOwner:'',isCreateTable:'',formName:'',userid:'',deptid:'',formType:'',isTemplate:'',bizType:'',ctime:'',branchId:''},
				/**begin 在下面加自定义属性,记得补上面的一个逗号**/
				selectedFields:[],
				sampleFields:[
					{formId:'formId',id:'1',showStyle:'origin',fieldId:'one',fieldIdCamel:'one',fieldTitle:'文本',isDict:'0',dictCode:'',fieldType:'text',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'4',showStyle:'origin',fieldId:'four',fieldIdCamel:'four',fieldTitle:'多行文本',isDict:'0',dictCode:'',fieldType:'textarea',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'41',showStyle:'origin',fieldId:'four1',fieldIdCamel:'four1',fieldTitle:'html',isDict:'0',dictCode:'',fieldType:'text',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'html',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'42',showStyle:'origin',fieldId:'four2',fieldIdCamel:'four2',fieldTitle:'图片',isDict:'0',dictCode:'',fieldType:'image',fieldLength:20,defaultValue:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'image',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'43',showStyle:'origin',fieldId:'four3',fieldIdCamel:'four3',fieldTitle:'文件',isDict:'0',dictCode:'',fieldType:'att',fieldLength:20,defaultValue:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'att',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'44',showStyle:'origin',fieldId:'four4',fieldIdCamel:'four4',fieldTitle:'链接',isDict:'0',dictCode:'',fieldType:'link',fieldLength:20,defaultValue:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'link',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},

					{formId:'formId',id:'2',showStyle:'origin',fieldId:'two',fieldIdCamel:'two',fieldTitle:'数字',isDict:'0',dictCode:'',fieldType:'number',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'3',showStyle:'origin',fieldId:'three',fieldIdCamel:'three',fieldTitle:'金额',isDict:'0',dictCode:'',fieldType:'amount',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},

					{formId:'formId',id:'5',showStyle:'origin',fieldId:'five',fieldIdCamel:'five',fieldTitle:'单选下拉',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'6',showStyle:'origin',fieldId:'six',fieldIdCamel:'six',fieldTitle:'多选下拉',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'1',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},

					{formId:'formId',id:'7',showStyle:'origin',fieldId:'seven',fieldIdCamel:'seven',fieldTitle:'单选',isDict:'0',dictCode:'',fieldType:'radio',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'8',showStyle:'origin',fieldId:'eight',fieldIdCamel:'eight',fieldTitle:'单选框',isDict:'0',dictCode:'',fieldType:'checkbox',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'9',showStyle:'origin',fieldId:'nine',fieldIdCamel:'nine',fieldTitle:'多选框',isDict:'0',dictCode:'',fieldType:'checkbox',fieldLength:20,defaultValue:'',isMultiple:'1',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},

					{formId:'formId',id:'10',showStyle:'origin',fieldId:'ten',fieldIdCamel:'ten',fieldTitle:'时间',isDict:'0',dictCode:'',fieldType:'time',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'11',showStyle:'origin',fieldId:'eleven',fieldIdCamel:'eleven',fieldTitle:'日期',isDict:'0',dictCode:'',fieldType:'date',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'12',showStyle:'origin',fieldId:'twelve',fieldIdCamel:'twelve',fieldTitle:'日期时间',isDict:'0',dictCode:'',fieldType:'datetime',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入日期时间',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'13',showStyle:'origin',fieldId:'thirteen',fieldIdCamel:'thirteen',fieldTitle:'年',isDict:'0',dictCode:'',fieldType:'year',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请选中年份',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'14',showStyle:'origin',fieldId:'fourteen',fieldIdCamel:'fourteen',fieldTitle:'月',isDict:'0',dictCode:'',fieldType:'month',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请选中月份',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'141',showStyle:'origin',fieldId:'fourteen1',fieldIdCamel:'fourteen1',fieldTitle:'日期区间',isDict:'0',dictCode:'',fieldType:'daterange',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},

					{formId:'formId',id:'15',showStyle:'origin',fieldId:'fifteen',fieldIdCamel:'fifteen',fieldTitle:'部门(单选)',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'dept',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'16',showStyle:'origin',fieldId:'sixteen',fieldIdCamel:'sixteen',fieldTitle:'部门(多选)',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'1',placeholder:'请输入',isRequired:'0',remark:'属性',extFieldType:'dept',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},

					{formId:'formId',id:'17',showStyle:'origin',fieldId:'seventeen',fieldIdCamel:'seventeen',fieldTitle:'员工(多选)',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'1',placeholder:'支持多选',isRequired:'0',remark:'属性',extFieldType:'user',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'18',showStyle:'origin',fieldId:'eighteen',fieldIdCamel:'eighteen',fieldTitle:'员工(单选)',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'单选',isRequired:'0',remark:'属性',extFieldType:'user',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'19',showStyle:'origin',fieldId:'nineteen',fieldIdCamel:'nineteen',fieldTitle:'标签(单选)',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'0',placeholder:'单选标签',isRequired:'0',remark:'属性',extFieldType:'tag',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''},
					{formId:'formId',id:'20',showStyle:'origin',fieldId:'twenty',fieldIdCamel:'twenty',fieldTitle:'标签(单选)',isDict:'0',dictCode:'',fieldType:'select',fieldLength:20,defaultValue:'',isMultiple:'1',placeholder:'多选标签',isRequired:'0',remark:'属性',extFieldType:'tag',toFlow:'0',flowFieldId:'',isBizKey:'0',fieldQx:''}
 
				], 
				delFields:[],//存放删除的属性
				drag:true, 
				showPopover:false,
				activeName:'first',
				metaItemSelected:{},//选择的基础数据二级分类代码
				itemOptionMngVisible:false,//基础数据弹出框
				fieldIds: [
					{fieldId:'zero',fieldIdCamel:'zero'},
					{fieldId:'one',fieldIdCamel:'one'},
					{fieldId:'two',fieldIdCamel:'two'},
					{fieldId:'three',fieldIdCamel:'three'},
					{fieldId:'four',fieldIdCamel:'four'},
					{fieldId:'five',fieldIdCamel:'five'},
					{fieldId:'six',fieldIdCamel:'six'},
					{fieldId:'seven',fieldIdCamel:'seven'},
					{fieldId:'eight',fieldIdCamel:'eight'},
					{fieldId:'nine',fieldIdCamel:'nine'},
					{fieldId:'ten',fieldIdCamel:'ten'},
					{fieldId:'eleven',fieldIdCamel:'eleven'},
					{fieldId:'twelve',fieldIdCamel:'twelve'},
					{fieldId:'thirteen',fieldIdCamel:'thirteen'},
					{fieldId:'fourteen',fieldIdCamel:'fourteen'},
					{fieldId:'fifteen',fieldIdCamel:'fifteen'}
				],
				//新增界面数据 表单数据表
				showData: {
					id:'',two:'',three:'',four:'',five:'',six:'',seven:'',eight:'',nine:'',ten:'',lastTime:'',one:'',zero:'',remark:'',formId:'',userid:'',eleven:'',twelve:'',thirteen:'',fourteen:'',fifteen:'',sixteen:'',seventeen:'',eighteen:'',nineteen:'',twenty:'',deptid:'',branchId:''
				}, 
				sampleData:{
					id:'',two:'',three:'',four:'',five:'',six:'',seven:'',eight:'',nine:'',ten:'',lastTime:'',one:'',zero:'',remark:'',formId:'',userid:'',eleven:'',twelve:'',thirteen:'',fourteen:'',fifteen:'',sixteen:'',seventeen:'',eighteen:'',nineteen:'',twenty:'',deptid:'',branchId:''
				},
				primaryKeys:[],
				/**end 在上面加自定义属性**/
			}//end return
		},//end data
		methods: {
			// 取消按钮点击 父组件监听@cancel="addFormVisible=false" 监听
			handleCancel:function(){
				this.$emit('cancel');
			},
		    itemDelete(item,index){
		    	this.addForm ={}; 
		    	this.showPopover=false; 
		    	this.selectedFields.splice(index, 1);
		    	
		    }, 
		    itemClick(item,index){
		    	this.addForm =item; 
		    	this.showPopover=true; 
		    	
			},
			
	      setPrimaryKeys:function(  ) {   
			  var primaryKeys=this.primaryKeys;
			  var isBizKeyPrefix="";
			  if(primaryKeys.some(i=>i=='cuserid')){
				  isBizKeyPrefix="1"
			  }else{
				   isBizKeyPrefix="0"
			  }
			  
			  if(primaryKeys.some(i=>i=='deptid')){
				  isBizKeyPrefix=isBizKeyPrefix+"1"
			  }else{
				   isBizKeyPrefix=isBizKeyPrefix+"0"
			  }
			  this.selectedFields.forEach(field=>{
					if(primaryKeys.some(key=>field.fieldIdCamel==key)){
						field.isBizKey=isBizKeyPrefix+"1"
					}else{
						field.isBizKey=isBizKeyPrefix+"0"
					}
			  });
	      },
		    add(evt){ 
		    	let item=this.selectedFields[evt.newIndex]; 
				item.isNewAdd='1' 
				this.selectedFields[evt.newIndex]=Object.assign({}, item);
				var noSelectFieldId=this.fieldIds.find(i=>{
					return !this.selectedFields.some(k=>k.fieldId==i.fieldId && k.isNewAdd!='1');
				}) 
				this.selectedFields[evt.newIndex].fieldId=noSelectFieldId.fieldId
				this.selectedFields[evt.newIndex].fieldIdCamel=noSelectFieldId.fieldIdCamel 
				this.selectedFields[evt.newIndex].isNewAdd='0'
		    	this.addForm=this.selectedFields[evt.newIndex]; 
		    	     			    	
		    },
			 
			deleteBaseData(){
				this.addForm.isDict='0';
				this.addForm.dictCode=''; 
			},  
			 
			/**end 在上面加自定义方法**/
			
		},//end method
		components: {  
		    //在下面添加其它组件 'form-field-edit':FormFieldEdit
		    draggable, FieldQxSet
		},
		mounted() {
			
			this.myFormDef=this.formDef
			if(this.formFields){
				this.selectedFields=JSON.parse(JSON.stringify(this.formFields))
			}else{
				this.selectedFields=[]
			}
			
		}//end mounted
	}

</script>

<style rel="stylesheet/scss" lang="scss" scoped> 
.min-height{
  min-height:300px; 
  }

  
  .set-btn {
    display: none;
  }
  
 
  .form-item:hover .set-btn { 
    display: inline-block; 
  }

</style>